import { OrderDetail } from '@/api/order';
import { Button, Cell, Rate } from '@antmjs/vantui';
import { Text, View } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import { useRequest } from 'taro-hooks';
import { useEvaluate } from '../components/useEvaluate';

export default function Page() {
  const router = useRouter();
  const { data: detail, refresh } = useRequest(() =>
    OrderDetail({ id: router.params?.id! })
  );

  const { renderNode: renderEvaluateNode, open: openEvaluate } = useEvaluate({
    onSuccess: function () {
      refresh();
    },
    detail: detail!,
  });

  return (
    <>
      <View className=' px-4'>
        {detail?.expert && (
          <Cell
            onClick={() => {
              Taro.navigateTo({
                url: `/pages/professional/detail?id=${detail?.expert?.id}`,
              });
            }}
            title='咨询专家：'
            isLink
            border={false}
            className=' rounded-lg mt-4'
          >
            <Text className=' text-primary font-bold'>
              {detail?.expert?.name}
            </Text>
          </Cell>
        )}

        <Cell
          title='预约时段：'
          titleWidth='150'
          border={false}
          className=' rounded-lg mt-4'
        >
          {detail?.time?.appoint_time}
        </Cell>

        {detail?.time?.address && (
          <Cell
            title='预约地址：'
            titleWidth='150'
            border={false}
            className=' rounded-lg mt-4'
          >
            {detail?.time?.address}
          </Cell>
        )}

        {detail?.suggest && (
          <View className=' mt-4 rounded-lg bg-white p-4'>
            <Text className=' text-sm  block mb-2 '>专家建议：</Text>
            <View className=' p-4 rounded-lg bg-[#F6F7FB] text-xs'>
              {detail.suggest}
            </View>
          </View>
        )}

        {detail?.user_estimate && (
          <View className=' mt-4 rounded-lg bg-white p-4'>
            <Text className=' text-sm  block mb-2 '>我的评价：</Text>
            <Rate value={detail?.star || 0} color='#F6AD3C' />
            <View className=' p-4 rounded-lg bg-[#F6F7FB] text-xs mt-2'>
              {detail?.user_estimate}
            </View>
          </View>
        )}
      </View>

      {!detail?.user_estimate && detail?.status === 3 && (
        <View className=' fixed left-4 right-4 bottom-4'>
          <Button type='primary' block onClick={() => openEvaluate()}>
            去评价
            <View
              className='w-[270px] h-[38px] leading-[38px] bg-cover absolute right-[24px] top-[22px] text-xs text-white'
              style={{
                backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/reservation-1.svg)`,
              }}
            >
              ·完成评价可得{detail?.points}积分
            </View>
          </Button>
        </View>
      )}

      {renderEvaluateNode()}
    </>
  );
}
